<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery/jquery-3.7.1.js"></script>
    <script>
        function showMsg() {
            // 发请求，获取数据，使用标签展示到div中
            $.ajax({
                url: 'demo01?type=4',
                type: 'GET',
                // 接收数据的类型，将结果根据JSON转换成js对象
                // 如果没写出来，根据服务端的contentType确定类型
                dataType: 'json',
                success: function (res) {
                    // 如果服务端没有指明ContentType为application/json
                    // ajax不会自动转json字符串为js对象
                    console.log(res) // 就已经是一个js的对象了
                    let html = ""
                    html += "<p>名字：" + res.name + "</p>"
                    html += "<p>年龄：" + res.age + "</p>"
                    html += "<p>性别：" + res.sex + "</p>"
                    html += "<p>班级号：" + res.grade.number + "</p>"
                    html += "<p>专业：" + res.grade.major + "</p>"
                    html += "<p>爱好：" + res.hobby + "</p>"
                    $('#msg').html(html)
                },
                error: function (error) {
                    console.log(error)
                }
            })
        }
    </script>
</head>
<body>
    <button onclick="showMsg()">显示信息</button>
    <div id="msg">

    </div>
    <img src="demo01?type=5" alt=""><br>
    <!-- controls是播放器控件 -->
    <audio controls src="demo01?type=6" autoplay></audio><br>
    <video controls src="demo01?type=7"></video>
</body>
</html>